import { assessAnalysisOverviewArea } from '@/services/api/api-assess-analysis';
import { StatisticCard } from '@ant-design/pro-components';
import { useAccess } from 'umi';
import { Divider } from 'antd';
import React, { useEffect, useState } from 'react';

interface AreaOverviewProps {
  areaId: string;
  releaseTimes: Array<string>; //季度发布时间范围
}

const AreaOverview: React.FC<AreaOverviewProps> = ({ areaId, releaseTimes }) => {
  const [responsive, setResponsive] = useState(false);
  const access = useAccess();

  const [overviewAreaData, setOverviewAreaDataState] = useState<AssessAnalysisData.OverviewArea>();

  const loadData = async () => {
    const response = await assessAnalysisOverviewArea({
      areaId: areaId,
      releaseTimes: releaseTimes,
    });

    if (response.code == 0) {
      setOverviewAreaDataState(response.data);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  return (
    <>
      <StatisticCard.Group direction={'column'}>
        <StatisticCard
          statistic={{
            title: (
              <span
                style={{
                  fontWeight: 'bold',
                }}
              >
                总量
              </span>
            ),
            value: overviewAreaData?.totalRecordCount,
            precision: 0,
            suffix: '篇',
          }}
        // chart={
        //   <img
        //     src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
        //     alt="直方图"
        //     width="100%"
        //   />
        // }
        />
        <Divider type={responsive ? 'horizontal' : 'vertical'} />

        <StatisticCard
          statistic={{
            title: (
              <span
                style={{
                  fontWeight: 'bold',
                }}
              >
                发稿情况
              </span>
            ),
            value: overviewAreaData?.releaseMediaCount,
            precision: 0,
            suffix: '篇',
          }}
        // chart={
        //   <img
        //     src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
        //     alt="直方图"
        //     width="100%"
        //   />
        // }
        />
        <Divider type={responsive ? 'horizontal' : 'vertical'} />
        <StatisticCard
          statistic={{
            title: (
              <span
                style={{
                  fontWeight: 'bold',
                }}
              >
                重点报道传播力评价
              </span>
            ),
            value: "正在开发中...",
            precision: 0,
            // suffix: '篇',
          }}
        // chart={
        //   <img
        //     src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
        //     alt="直方图"
        //     width="100%"
        //   />
        // }
        />
        <Divider type={responsive ? 'horizontal' : 'vertical'} />
        <StatisticCard
          statistic={{
            title: (
              <span
                style={{
                  fontWeight: 'bold',
                }}
              >
                推动正能量登上热搜热榜评价
              </span>
            ),
            value: "正在开发中...",
            precision: 0,
            // suffix: '篇',
          }}
        // chart={
        //   <img
        //     src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
        //     alt="直方图"
        //     width="100%"
        //   />
        // }
        />
      </StatisticCard.Group>
    </>
  );
};
export default AreaOverview;
